<template>
  <div class="Learning-index">
    <h3>使用 <code>useTitle</code> 将document.title变成响应式数据</h3>
    <codeContainer>
      <template #default>
        {{ title }}
        <div class="flex v h">
          <input type="text" v-model="title">
        </div>
        <div class="flex v h my-2">
          使用document.title 修改 title为 LEARNING
          <button @click="changeTitle">document.title = 'LEARNING'</button>
        </div>
      </template>
      <template #code>
            <pre data-type="js">
              {{ codeFragment["vueUseTitle1"] }}
            </pre>
      </template>
    </codeContainer>
    <h3>实现 <code>useTitle</code></h3>
    <div class="code-source-wrapper" v-highlight>
      <pre data-type="js">
        {{ codeFragment["vueUseTitle2"] }}
      </pre>
    </div>
  </div>
</template>

<script setup>
import { useTitle } from '@/assets/js/hooks';
import CodeContainer from '@/components/codeContainer/codeContainer.vue';
import codeFragment from '../../assets/js/codeFragment';
// codeFragment-split
// '%s | 我的标题' => `${title} | 我的标题`
// const title = useTitle('New Title', { titleTemplate: '%s | 12345' });
// 监听 document.title 的变化 保持一致
const title = useTitle('New Title', { observe: true });

function changeTitle() {
  document.title = 'LEARNING';
}
</script>
